<div class='side-panel' id='todolistPanel' hidden>
  <button type='button' data-action='toggle-sidepanel' data-target='todolist' data-purpose='hide' aria-label='{{ 'Close'|trans }}' title='{{ 'Close'|trans }}' class='btn float-right mr-2'><i class='fas fa-xmark fa-2x'></i></button>
  <div class='p-3'>
    <h3 title='{{ 'Toggle visibility'|trans }}' tabindex='0' role='button' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='mb-3 py-2'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Todolist'|trans }}</h3>

    <div data-save-hidden='todolistMainDiv'>
      <div class='input-group mt-2 mb-3'>
        <input id='todo' type='text' class='form-control form-inline' aria-label='{{ 'Add'|trans }}' placeholder='{{ 'Add a new task'|trans }}'>
        <div class='input-group-append'>
          <button class='btn btn-primary' type='button' title='{{ 'Add'|trans }}' data-action='create-todoitem' aria-label='{{ 'Add'|trans }}'>
            <i class='fas fa-plus fa-fw' title='{{ 'Add'|trans }}'></i>
          </button>
        </div>
      </div>

      {# this will be filled with the to-do items by js #}
      <div id='todoItems' class='sortable d-flex flex-column' data-axis='y' data-table='todolist'></div>
    </div>

    <div class='clear'><hr></div>
    <div class='d-flex mx-2 mb-1'>
      <div class='mr-auto'>
        <h3 class='mr-auto'>{{ 'Unfinished steps'|trans }}</h3>
      </div>

      {# Toggle scope User/Team switch #}
      <div class='d-inline-flex rounded border-white p-1 align-items-center'>
        <label class='mb-0' for='todolistStepsShowTeam'>{{ 'User'|trans }}</label>
        <label class='switch mx-1 mb-0'>
          <input type='checkbox' id='todolistStepsShowTeam' autocomplete='off' aria-label='{{ 'Show steps for team'|trans }}'>
          <span class='slider'></span>
        </label>
        <label class='mb-0' for='todolistStepsShowTeam'>{{ 'Team'|trans }}</label>
      </div>
    </div>

    {# EXPERIMENT STEPS #}
    <h3 title='{{ 'Toggle visibility'|trans }}' tabindex='0' role='button' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='py-2'><i class='fas fa-caret-down fa-fw mr-2'></i>{% trans %}Experiment{% plural 2 %}Experiments{% endtrans %}</h3>
    <div data-save-hidden='todoStepsExperiments'>{# this div is here as a target of the toggle-next, because for some reason 'hidden' doesn't work on a flex container #}
      {# id is needed to fill it from Todolist.class.ts #}
      <div id='todoStepsExperiments' class='d-flex flex-column'></div>
    </div>

    {# ITEMS STEPS #}
    <h3 title='{{ 'Toggle visibility'|trans }}' tabindex='0' role='button' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='py-2'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Resources'|trans }}</h3>
    <div data-save-hidden='todoStepsItem'>{# this div is here as a target of the toggle-next, because for some reason 'hidden' doesn't work on a flex container #}
      {# id is needed to fill it from Todolist.class.ts #}
      <div id='todoStepsItems' class='d-flex flex-column'></div>
    </div>
  </div>
</div>
